<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>主页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="12" style="color: #e4e4e4">
          <el-card class="box-card">
            <div id="main1" style="width:100% ;height:400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12" style="color: #e4e4e4">
          <el-card class="box-card">
            <div id="main2" style="width:100% ;height:400px;"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" style="color: #e4e4e4">
          <el-card class="box-card">
            <div id="main3" style="width:100% ;height:400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12" style="color: #e4e4e4">
          <el-card class="box-card">
            <div id="main" style="width:100% ;height:400px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      value: new Date(),
      selectDate: "",
      chartsData: [],
      chartsData1: [],
    }
  },
  created() {
    this.getToday()
    this.getPie()
  },
  methods: {
    async getToday() {
      const date = new Date();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      const curDate = date.getFullYear() + '-' + month + '-' + strDate;
      this.selectDate = curDate.toString()
    },
    async getPie() {
      const {data: result} =
        await this.$http.get(`/user/generateAttdanceByday/${this.selectDate}`)
      const {data: result2} =
        await this.$http.get(`/user/getStackedLineData/${this.selectDate}`)
      this.chartsData1 = result2.data
      console.log(this.chartsData1)
      console.log(this.chartsData)
      if (result.status !== 200) return this.$message.error("考勤统计查询失败")
      this.chartsData = result.data
      if ((this.chartsData[0].value + this.chartsData[1].value + this.chartsData[2].value + this.chartsData[3].value === 0)) return this.$message.error("今日无考勤结果")
      const myChart = this.$echarts.init(document.getElementById('main'))
      const myChart1 = this.$echarts.init(document.getElementById('main2'))
      const myChart2 = this.$echarts.init(document.getElementById('main3'))
      const myChart3 = this.$echarts.init(document.getElementById('main1'))

      const option = {
        title: {
          //标题
          text: '考勤次数',
          //x轴对齐方式
          x: 'left',
        },
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        //图例
        legend: {
          bottom: 10,
          left: 'center',
          textStyle: {
            color: '#000',
            fontSize: 16
          },
        },
        color: ['#32dadd', '#b6a2de', '#5ab1ef', '#59808C'],
        series: {
          name: '考勤统计',
          type: 'pie',
          radius: '80%',
          center: ['50%', '50%'],
          data: this.chartsData,
          itemStyle: {
            normal: {
              label: {
                show: true,
              },
              labelLine: {
                show: false
              }
            }
          }
        }
      }
      const option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.chartsData1[1].data,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      const option3 = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: this.chartsData1
      }
      const option4 = {
        title: {
          text: 'Funnel'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
        },
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: this.chartsData
          }
        ]
      }
      myChart.setOption(option)
      this.$message.success("考勤统计查询成功")
      myChart1.setOption(option2)
      myChart2.setOption(option3)
      myChart3.setOption(option4)
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
</style>
